<template>
  <!--   :style="{ width: width, height: height }" -->
  <div ref="chart" class="chart"></div>
</template>

<script>
let myChart = null;
import * as echarts from "echarts";
export default {
  name: "GraphChart",
  // props: {
  //   width: {
  //     type: String,
  //     default: "400px",
  //   },
  //   height: {
  //     type: String,
  //     default: "200px",
  //   },
  // },
  props: {
    pieChartData: {
      type: Array,
      default: () => {},
    },
    userid: {
      default: () => null,
    },
  },
  watch: {
    pieChartData(n) {
      let sum = 0;
      let links = [];
      n.forEach((element) => {
        if (element.value) sum += Number(element.value);
      });
      let newData = [];
      n.forEach((element) => {
        if (!element.name) return;
        if (element.isCenter) {
          element.symbolSize = 60;
        } else {
          // 最小10  要不然显示不出来
          element.symbolSize =
            (element.value / sum) * 160 > 10 ? (element.value / sum) * 160 : 10;
          links.push({
            source: element.name,
            target: this.userid,
            // value: 100,
          });
        }
        element.draggable = true;
        newData.push(element);
      });
      this.initChart(newData, links);
    },
  },
  mounted() {
    myChart = echarts.init(this.$refs.chart);
  },
  methods: {
    initChart(data, links) {
      var option = {
        title: {
          text: "数据来源",
          left: 10,
          top: 10,
          textStyle: {
            color: "#2ED97A",
            fontSize: 14,
            fontWeight: 400,
          },
        },
        tooltip: {
          //   show: false,
        },
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: 250,
              edgeLength: 50,
            },
            roam: false,
            label: {
              normal: {
                show: true,
              },
            },
            // itemStyle: {
            //   color: (val) => {
            //     return ["#039780", "#1A9AD8", "#EDBF00", "#EA8B00", "#2ED97A"][
            //       val.dataIndex
            //     ];
            //   },
            // },
            data,
            links,
          },
        ],
      };
      myChart.setOption(option);
      // 屏幕大小改变 图大小适应
      window.onresize = myChart.resize;
    },
  },
};
</script>

<style lang="scss" scoped>
.chart {
  width: 400px;
  height: 260px;
  background-image: url("../assets/image/矩形 6.png");
  background-size: 100% 100%;
}
</style>
